// webpack的配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
    // 1.入口
    entry: './src/index.js',// 告诉webpack从这个文件开始打包

    // 2.输出
    output: {
        // __dirname 返回当前配置文件所在目录的绝对路径
        path: path.join(__dirname,'dist'),// 告诉webpack打包后文件的存储目录(绝对路径)
        filename: '[hash:6].js',// 告诉webpack打包后文件的名称
        clean: true// 自动清空上次打包的内容
    },

    // 3.加载器
    module: {
        rules: [
            // loader的配置
            {
                // 匹配.css结尾的资源
                test: /\.css$/,
                // 匹配到css资源时，先使用css-loader，再使用style-loader来处理css资源
                // use: ["style-loader","css-loader"] // 从右到左执行
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env'] // 能解决大部分兼容问题
                            }
                        }
                    }
                ] // 从下往上执行
            },
            {
                // 匹配.less结尾的资源
                test: /\.less$/,
                // 匹配到less资源时，先使用less-loader编译成css，再使用css-loader和style-loader来处理css资源
                // use: ["style-loader","css-loader","less-loader"] // 从右到左执行
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env'] // 能解决大部分兼容问题
                            }
                        }
                    },
                    "less-loader"
                ] // 从下往上执行
            },
            {
                // 匹配.scss结尾的资源
                test: /\.scss$/,
                // 匹配到sass资源时，先使用sass-loader编译成css，再使用css-loader和style-loader来处理css资源
                // use: ["style-loader","css-loader","sass-loader"] // 从右到左执行
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env'] // 能解决大部分兼容问题
                            }
                        }
                    },
                    "sass-loader"
                ] // 从下往上执行
            },
            {
                // 匹配.styl结尾的资源
                test: /\.styl$/,
                // 匹配到stylus资源时，先使用stylus-loader编译成css，再使用css-loader和style-loader来处理css资源
                // use: ["style-loader","css-loader","stylus-loader"] // 从右到左执行
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env'] // 能解决大部分兼容问题
                            }
                        }
                    },
                    "stylus-loader"
                ] // 从下往上执行
            },
            {
                // 匹配图片资源
                test: /\.(png|jpe?g|gif|svg)/,
                // 资源模块类型
                type: "asset",// 相当于使用了file-loader和url-loader
                parser: {
                    // 设置图片小于10kb时，将图片转成base64编码
                    dataUrlCondition: {
                        // 优点：减少图片数量，减少请求服务器次数
                        // 缺点：图片体积变大 8.04kb -> 8.2kb
                        maxSize: 1024 * 10
                    }
                },
                generator: {
                    // 设置图片打包后的存储目录和文件名称
                    // [hash:5] 占位符，取5位哈希值
                    // [ext] 占位符，使用文件原来的后缀名
                    filename: "imgs/[hash:5][ext]"
                }
            },
            {
                // 匹配其他资源
                test: /\.(eot|ttf|woff2?)$/,
                // 资源模块类型
                type: "asset",// 相当于使用了file-loader和url-loader
                generator: {
                    // 设置资源打包后的存储目录和文件名称
                    // [hash:5] 占位符，取5位哈希值
                    // [ext] 占位符，使用文件原来的后缀名
                    filename: "fonts/[hash:5][ext]"
                }
            },
            {
                // 匹配.js文件
                test: /\.js$/,
                // 排除编译目录node_modules
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    // options: {// 配置项可以写在配置文件中
                    //     // presets 预设
                    //     // '@babel/preset-env' 智能预设，允许使用最新的js语法
                    //     presets: ['@babel/preset-env']
                    // }
                }
            }
        ]
    },

    // 4.插件
    plugins: [
        // plugins的配置（创建插件的实例）
        new HtmlWebpackPlugin({// 插件的配置项
            // 以 public/index.html 文件作为模板打包创建一个新的html文件
            // 新的html文件有两个特征：
            // 1.内容和模板文件一样
            // 2.自动引入打包生成的main.js文件
            template: path.join(__dirname,'public/index.html'),// 设置打包的模板文件(绝对路径)
            filename: './index.html'// 设置打包html之后存储目录和文件名称
        }),
        new EslintWebpackPlugin({// 插件的配置项
            // 指定检查的文件目录src
            context: path.join(__dirname,'src'),
            // 排除检查的文件目录lib
            exclude: path.join(__dirname,'src/js/lib')
        }),
        new MiniCssExtractPlugin({// 插件的配置项
            filename: './css/index.css'// 提取出来的css文件存储目录和文件名称
        }),
        new CssMinimizerWebpackPlugin()
    ],

    // 5.模式
    mode: 'production', // 生产模式
}
